<template>
 
    <div class="app-container-form">

   <div class='  formPage' style="border:none !important;">
     <el-form ref="form"   label-width="100px" 
      :inline="true"
      class="theForm" >

    
         <div  class="formFlexContainer">
      
          <el-form-item label="学号" >
          {{info?.studentId}}
        </el-form-item>        
             
        <el-form-item label="姓名" prop="name" >
          {{info?.name}}
        </el-form-item>               
        
        <el-form-item label="性别" prop="genderId"  >
             <span v-if="info?.genderId == '1' ">
                男
              </span>
              <span v-if="info?.genderId == '2' ">
                女
              </span>
        </el-form-item>     

        <el-form-item label="类别" >
          {{getPclassName(info?.pclassId)}}
        </el-form-item>   

        <el-form-item label="学籍状态" >
         <span style="color:blue"> {{getStatusName(info?.statusId)}}</span>
        </el-form-item>    

       

        <el-form-item label="学院" prop="collegeId" >
            <span v-if='info?.dictCollege'>
                {{ info.dictCollege.shortname }}
              </span>
        </el-form-item>

        
        <el-form-item label="年级" prop="cellPhone" >
          {{info?.grade}}
        </el-form-item>
                    
        <el-form-item label="手机号码" prop="cellPhone" >
          {{info?.mobilephone}}
        </el-form-item>
          
      
        <el-form-item label="专业" prop="cellPhone" >
          {{info?.dictMajor.major}}
        </el-form-item>

        <el-form-item label="班级" prop="cellPhone" >
          {{info?.clazz}}
        </el-form-item>

       
        <slot />
        
     
     </div>
    
    
  
  
   
      </el-form>
     
</div>
</div>
</template>

<style scoped>
.sectiontitle{
  text-align: left;
  line-height: 50px;
  font-size: 14px;
  font-weight: bold;
}
td.noTopBorder {
  border-top: 0 !important;
}
.viewStaffInfo-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.toolbar {
  display: flex;
  margin-bottom: 10px;
}
.viewStaffInfo-container .tableInfoWrapper {
  flex-grow: 1;
  height: 200px;
  overflow: auto;
  background: #d9d9d9;
  padding: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 
  padding-top: 20px;
  padding-bottom: 40px;
  */
}
.tableInfoPage {
  background: #fff;
  padding: 20px;
  border-radius: 3px;
  /* height:100%; */
}
.tableInfo {
  width: 1000px;
  border-collapse: collapse;
}

.tableInfo .subTitle {
  font-weight: bold;
}

.tableInfo th {
  color: #909399;
  background: #fafafa;
}

.tableInfo td,
.tableInfo th {
  border: 1px solid #e6ebf5;
  padding: 12px;
  font-size: 14px;
  text-align: left;  
}

.tableInfo td {
  color: #606266;
}

.toolbar .left {
  width: 100px;
  flex-grow: 1;
}

.toolbar .right {
  width: 100px;
}
</style>
 

<script setup lang="ts">

import {defineProps} from 'vue'
import {getStatusName,getPclassName} from '@/service/StudentService.ts'

interface StudentInfo{
  info?:Student
}

defineProps<StudentInfo>();
 
</script>
